<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="../../resources/lib/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../../resources/personCenter/css/person-view.css">
    <link rel="stylesheet" href="../../resources/index/css/style1.css"/>
    <script style="text/javascript" src="../../resources/lib/jQuery/jquery-3.1.1.js"></script>
    <script style="text/javascript" src="../../resources/index/js/index.js"></script>
    <script type="text/javascript" src="../../resources/personCenter/js/person-view.js"></script>
    <script type="text/javascript" src="../../resources/lib/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script style="text/javascript" src="../../resources/index/js/login-user-id.js"></script>
</head>
<body>
<div class="" style="background:#fff6f4;!important;z-index: 100;width:100%;margin-top: 0px;">
    <div class="col-md-2">
        <img style="height:68px;width: 100%" src="../../resources/index/img/logo.png" alt=""/>
    </div>
    <!-- 代码 开始 -->
    <div id="menu2" class="menu col-md-7">
        <ul>
            <li><a  href="../index/index.html">首 页</a ></li>
            <li><a href="../scenicSpotIntroduction/scenicSpotIntroduction.html">特色景点</a></li>
            <li><a href="../gourmetHotel/gourmetHotel.html">住宿餐饮</a></li>
            <li><a href="../tourRoute/tourRoute.html">旅游导览</a></li>
            <li><a href="../backstory/backstory.html">背景故事</a></li>
            <li><a href="../aboutUs/aboutUs.html">关于我们</a></li>
            <li><a href="../travel-note/travel-note.html">游记</a></li>
        </ul>
        <div class="cls"></div>
    </div>
    <!-- 代码 结束 -->


    <div class="col-md-3 col-sm-3 col-lg-3 col-xs-12">
        <div id="weather" onmouseover="weatherView()" onmouseout="weatherViewRemove()" style="z-index: 100;position: absolute">

            地点：<span id="currentCity"></span>
            当前日期：<span id="date"></span><br/>
            天气：
            <span id="today_weather" class="weahter"></span>
            <img id="today_day" src=""/>
            <img id="today_night" src=""/>
            <div class="nextDay">
                明天：
                <span id="tomorrow_date"></span><br/>
                <img id="tomorrow_day" src=""/>
                <img id="tomorrow_night" src=""/>
                <span id="tomorrow_weather" class="weahter"></span>
                <span id="tomorrow_temperature" class="weahter"></span>
            </div>
            <div class="nextDay">
                后天：
                <span id="tomorrowAfter_date"></span><br/>
                <img id="tomorrowAfter_day" src=""/>
                <img id="tomorrowAfter_night" src=""/>
                <span id="tomorrowAfter_weather" class="weahter"></span>
                <span id="tomorrowAfter_temperature" class="weahter"></span>
            </div>
        </div>
    </div>
</div>
<div style="width:100%;height: 240px; background:url('../../resources/personCenter/img/bg-con.png')">

</div>
<div  class="cont col-md-10 col-md-offset-1">

    <img class="img-circle col-md-2" id="user_avt" style="margin-top: -50px;height: 120px;width: 150px" src="../../resources/travel-note/img/avt.jpg">
    <span id="user_email" class="glyphicon glyphicon-user" style="color: rgb(73, 75, 73); font-size: 15px;"> </span>
    <!--<span class="glyphicon glyphicon-time" style="color: rgb(73, 75, 73); font-size: 15px;"> 2016-4-25</span>-->

    <!--<span class="glyphicon glyphicon-thumbs-up" style="color: rgb(73, 75, 73);font-size: 15px;"> 55次</span>-->
    <!--<span class="glyphicon glyphicon-eye-open" style="color: rgb(73, 75, 73); font-size: 15px;"> 98次</span>-->
    <div>
        <span>个人简介:</span>
        <textarea id="user_detail" class=" detail col-md-10"></textarea>
        <div class="col-md-10 col-md-offset-2">
            <table class="col-md-6 con">
                <tr>
                    <td >电话号码：</td>
                    <td><span id="user_phone">1475142574</span></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        <span id="user_sex">男</span>

                    </td>
                </tr>
                <tr>
                    <td>生日：</td>
                    <td>
                        <span id="user_birthday"></span></td>
                </tr>
                <tr >
                    <td colspan="2">
                        <span onclick="conwrite()" class="glyphicon glyphicon-pencil" style="color: rgb(161, 163, 60); font-size: 21px;">修改资料</span>
                    </td>
                </tr>


            </table>


            <table class="col-md-6 con-write">
                <tr>
                    <td>电话：</td>
                    <td>
                        <input id="re_user_phone" type="text" value=""/></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        <input id="nan"  type="radio" checked="checked"  value=0 name="sex"/>男
                        <input id="nv" type="radio"  value=1 name="sex"/>女

                    </td>
                </tr>
                <tr>
                    <td>生日：</td>
                    <td>
                        <input id="re_user_birthday" type="date"/></td>

                </tr>
                <tr>
                    <td style="display: inline;" >
                        <span style="position: absolute;top: 110px;background: #ffe5d0;width: 80%;text-align: center;border-radius: 8px">选择头像
                        </span>
                        <input type="file" name="fileToUpload" id="fileToUpload" style="opacity: 0"/>
                        <input type="text" name="compressValue" id="compressValue" style="display:none;"/>
                    </td>
                    <td>
                        <input  style="width: 104%;" type="button" id='uploadBtn' value="上传头像" />
                    </td>
                </tr>
<tr style="text-align: right">
    <td colspan="2" style="text-align: right">
        <br/>
        <span onclick="con()" class="glyphicon glyphicon-ok" style="color: rgb(249, 159, 139); font-size: 30px;">保存</span></td>

</tr>
            </table>
            <div class="col-md-12">
                <span>我发布的游记</span>    <a id="report_travels" href=''> <span class="glyphicon glyphicon-pencil" style="font-size: 18px">发布游记</span></a>
                <ul id="travel_ul" class="list-group">
                    <li id="travel_default" class="list-group-item"></li>

                </ul>
            </div>
        </div>

    </div>
</div>
<script type="text/javascript">

    //实现登录用户userId作为参数传递到编写游记页面中



    var imagename;
    //用户头像上传
    var imgUrl=url+"/resources/img/";
    //图片上传change事件
    $('#fileToUpload').change(function(){
        uploadBtnChange();
    });

    //提交click事件
    $('#uploadBtn').click(function(){
        var preview = document.getElementById('compressValue').value;
        if(preview){
            $.ajax({
                url:url+"/users/details/image-upload",
                type: "POST",
                data:{'image':preview},
                dataType:'json',
                success:function(result) {
                    console.log(result);
                    if(result.error==0){
                    imagename=result.data;
                    $("#user_avt").attr('src',imgUrl+result.data);
                    }else{
                        imagename=0;
                        alert("上传头像出错，请重试");
                    }
                },
                error:function(){
                    alert('操作失败，请跟技术联系');
                }
            });
        }
    });

    function uploadBtnChange(){
        if(window.File && window.FileReader && window.FileList && window.Blob){
            //获取上传file
            var filefield = document.getElementById('fileToUpload'),
                    file = filefield.files[0];
            //获取用于存放压缩后图片base64编码
            var compressValue = document.getElementById('compressValue');
            processfile(file,compressValue);
        }else{
            alert("此浏览器不完全支持压缩上传图片");
        }

    }

    function processfile(file,compressValue) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var blob = new Blob([event.target.result]);
            window.URL = window.URL || window.webkitURL;
            var blobURL = window.URL.createObjectURL(blob);
            var image = new Image();
            image.src = blobURL;
            image.onload = function() {
                var resized = resizeMe(image);
                compressValue.value = resized;
            }
        };
        reader.readAsArrayBuffer(file);
    }

    function resizeMe(img) {
        //压缩的大小
        var max_width = 350;
        var max_height = 350;

        var canvas = document.createElement('canvas');
        var width = img.width;
        var height = img.height;
//        if(width > height) {
//            if(width > max_width) {
//                height = Math.round(height *= max_width / width);
//                width = max_width;
//            }
//        }else{
//            if(height > max_height) {
//                width = Math.round(width *= max_height / height);
//                height = max_height;
//            }
//        }
        width=max_width;
        height=max_height;

        canvas.width = width;
        canvas.height = height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);
        //压缩率
        return canvas.toDataURL("image/jpeg",0.92);
    }











//古老上传图片，未压缩
//    $("#imagesfile").change(function (){
//        var file = this.files[0];
//        //用size属性判断文件大小不能超过5M ，前端直接判断的好处，免去服务器的压力。
//        if( file.size > 5*1024*1024 ){
//            alert( "你上传的文件太大了！" )
//        }
//        var reader=new FileReader();
//        reader.onload = function(){
//            // 通过 reader.result 来访问生成的 base64 DataURL
//            var base64 = reader.result;
//            //打印到控制台，按F12查看
////            console.log(base64);
//            //上传图片
//            base64_uploading(base64);
//        };
//        reader.readAsDataURL(file);
//    });
//
//    //AJAX上传base64
//    function base64_uploading(base64Data){
//        $.ajax({
//            type: 'POST',
//            url: url+"/users/details/image-upload",
//            data: {
//                'image': base64Data
//            },
//            dataType: 'json',
//            timeout: 50000,
//            success: function(result){
//                console.log(result.msg);
//                if(result.error==0){
//
//                    imagename=result.data;
//                    $("#user_avt").attr("src",imgUrl+result.data);
//                }else{
//                    imagename=0;
//                    alert("上传头像出错，请重试")
//                }
//            },
//            complete:function() {},
//            error: function(xhr, type){
//
//                alert('上传超时啦，再试试');
//            }
//        });
//    }
//


</script>
</body>
</html>